<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import type { BannerItem, CategoryItem, HotItem } from '@/types/home.d.ts'
import { getHomeBannerApi, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
const bannerList = ref<BannerItem>([])
const catoryList = ref<CategoryItem>([])
const hotList = ref<HotItem>([])
const getBammerList = async () => {
  const res = await getHomeBannerApi()
  const data = [
    {
      id: '1',
      imgUrl: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg',
      type: 1,
    },
    {
      id: '2',
      imgUrl: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg',
      type: 1,
    },
  ]
  bannerList.value = data
  // bannerList.value = res.result
}
const getHomeCategory = async () => {
  const res = await getHomeCategoryAPI()
  let data = [
    {
      id: '1',
      icon: 'https://wx4.sinaimg.cn/mw690/ec31daabgy1hyw5zrac2kj20gi0gin0h.jpg',
      name: '简介',
    },
    {
      id: '2',
      icon: 'https://wx4.sinaimg.cn/mw690/ec31daabgy1hyw5zshezcj20qo0qoq9c.jpg',
      name: '影视',
    },
    {
      id: '3',
      icon: 'https://wx1.sinaimg.cn/mw690/ec31daabgy1hyw5zqdr4hj20qo0qoae7.jpg',
      name: '舞台',
    },
    {
      id: '4',
      icon: 'https://wx3.sinaimg.cn/mw690/ec31daabgy1hyw5zszxl7j20qo0qoq5c.jpg',
      name: '综艺',
    },
    {
      id: '5',
      icon: 'https://wx2.sinaimg.cn/mw690/ec31daabgy1hyw5zvgrldj20qo0qoaha.jpg',
      name: '商务',
    },
    {
      id: '6',
      icon: 'https://wx4.sinaimg.cn/mw690/ec31daabgy1hyw5zwca1bj20qo0qo796.jpg',
      name: '杂志',
    },
    {
      id: '7',
      icon: 'https://wx1.sinaimg.cn/mw690/ec31daabgy1hyw5zy72iuj211h1k5ti9.jpg',
      name: '美图',
    },
    {
      id: '8',
      icon: 'https://wx3.sinaimg.cn/mw690/ec31daabgy1hyw5zz3rc5j20u00u0dn5.jpg',
      name: 'vlog',
    },
    {
      id: '9',
      icon: 'https://wx1.sinaimg.cn/mw690/ec31daabgy1hyw61tg0gbj20qy0qydix.jpg',
      name: '周边',
    },
    {
      id: '10',
      icon: 'https://wx3.sinaimg.cn/mw690/ec31daabgy1hyw61v84ljj20xi18oqbo.jpg',
      name: '线下',
    },
  ]
  catoryList.value = data
  // catoryList.value = res.result
}
const getHomeHotList = async () => {
  const res = await getHomeHotAPI()
  let data = [
    {
      id: '1',
      title: '影视剪辑',
      type: 1,
      alt: '最新上线',
      pictures: [
        'https://wx4.sinaimg.cn/mw690/ec31daabgy1hyw886mtkvj20qo0zkwmp.jpg',
        'https://wx2.sinaimg.cn/mw690/ec31daabgy1hyw8874zk2j20zk0qon21.jpg',
      ],
    },
    {
      id: '2',
      title: '直拍舞台',
      type: 2,
      alt: '观看最多',
      pictures: [
        'https://wx4.sinaimg.cn/mw690/ec31daabgy1hyw885f5ibj20qo1407b1.jpg',
        'https://wx2.sinaimg.cn/mw690/ec31daabgy1hyw887kvz1j20zk0qoq6x.jpg',
      ],
    },
    {
      id: '3',
      title: '周边推荐',
      type: 3,
      alt: '点赞最多',
      pictures: [
        'https://wx1.sinaimg.cn/mw690/ec31daabgy1hyw8884s2bj20qo13zafo.jpg',
        'https://wx1.sinaimg.cn/mw690/ec31daabgy1hyw8892g9sj20qo0zjk11.jpg',
      ],
    },
    {
      id: '4',
      title: '精美图片',
      type: 4,
      alt: '收藏最多',
      pictures: [
        'https://wx3.sinaimg.cn/orj360/ec31daabgy1hyw88a01zhj20qo0zkk2k.jpg',
        'https://wx4.sinaimg.cn/mw690/ec31daabgy1hyw88ank2mj20u0140n46.jpg',
      ],
    },
  ]
  hotList.value = data
  // hotList.value = res.result
}
onLoad(() => {
  getBammerList()
  getHomeCategory()
  getHomeHotList()
})
</script>

<template>
  <view class="page">
    <CustomNavbar />
    <scroll-view class="scrollView" scroll-y>
      <PatBanner :list="bannerList" />
      <CategoryPanel :list="catoryList" />
      <HotPanel :list="hotList" />
      <PatGuess />
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .scrollView {
    flex: 1;
  }
}
</style>
